import React, {Component} from 'react';
import {withRouter,Link, Switch, Route} from 'react-router-dom'
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import { LocaleProvider } from 'antd';
import 'moment/locale/zh-cn';
import Loading from "./../loading"//加载中样式
import { Layout, Menu,  Icon ,Button,Table, Form, Pagination,Radio} from 'antd';
import $ from "jquery"



import "../../static/systemSetup/system-base.styl"

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

//表格
const columns = [{
    title: 'ID',
    dataIndex: 'ID',
    key: 'ID',
    width: 70,
   
  }, {
    title: '内容',
    dataIndex: 'content',
    key: 'content',
    width: 220,
  }, {
    title: '时间',
    dataIndex: 'time',
    key: 'time',
    width: 330,
    sorter:true
  }, {
    title: '操作模块',
    dataIndex: 'modle',
    key: 'modle',
    width: 120,
  },
  {
    title: 'IP地址',
    dataIndex: 'IP',
    key: 'IP',
    width: 200,
    
  }];

  const data = [];
for (let i = 1; i <= 9; i++) {
  data.push({
    ID: i,
    content: '从架构角度来看 Java 分布式日志如何收集',
    time: '2018-07-30 17:37',
    modle: '用户登录/用户退出',
    IP:'121.225.153.69'
  });
}

export default class SystemLog extends React.Component{
    //表格配置项
    state = {
        selectedRowKeys: [],
        visible: false,
        value: 1,
    }
    start = () => {
        setTimeout(() => {
          this.setState({
            selectedRowKeys: [],
    
          });
        }, 1000);
      }
    //复选框
      onSelectChange = (selectedRowKeys) => {
        this.setState({ selectedRowKeys });
      }  
    //弹出框
    addKeywords = () => {
        this.setState({
          visible: true,
        });
      }
    //点击确定
    handleOk = (e) => {
        this.setState({
          visible: false,
        });
      }
      //点击取消
      handleCancel = (e) => {
        this.setState({
          visible: false,
        });
      }    
      //单选框
      onChange = (e) => {
        this.setState({
          value: e.target.value,
        });
      }
      itemRender=(current, type, originalElement)=> {
        if (type === 'prev') {
          return <a>上一页</a>;
        } if (type === 'next') {
          return <a>下一页</a>;
        }
        return originalElement;
      }
      //第一次渲染后
      componentDidMount(){
        $('.ant-table-column-sorter-up>i').removeClass('anticon-caret-up').addClass('anticon-up').css({color:"#30383e",fontSize:"10px"})
        $('.ant-table-column-sorter-down>i').removeClass('anticon-caret-down').addClass('anticon-down').css({color:"#30383e",fontSize:"10px"})
      }
    render(){
        const state = this.state;
       
          const {  selectedRowKeys } = this.state;
          const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
          };
          const hasSelected = selectedRowKeys.length > 0;
        return(

            <div className="container">
             <Loading className="loadingPage"/>
               <Layout>
                  
                    <Layout>
                        <Content style={{ background: '#fff', margin: 0, minHeight: 280 , overflowY:"hidden"}}>
                         
                          <div className="btns-center">
                           
                            {/* 表格 */}
                            
                            <Table {...this.state} columns={columns} dataSource={data} rowSelection={rowSelection} style={{marginTop:"5%"}} pagination={false} style={{marginBottom:"2%"}}/>
                            <LocaleProvider locale={zh_CN}>
                              <Pagination showQuickJumper defaultCurrent={2} 
                              itemRender={this.itemRender}
                              total={500}  style={{marginLeft:"27%"}}/>
                            </LocaleProvider>
                            <span className="pagTips">共计<i>854</i>条</span>
                          </div>
                          
                        </Content>
                    </Layout>
                    </Layout>
                
           </div>
        );
    }
}